<template>
    <div >
        <el-row :gutter="20">
            <el-col :xs="24" :sm="24" :md="24" :lg="24">
                <el-card class="box-card">
                    <radio></radio>
                </el-card>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :xs="24" :sm="24" :md="24" :lg="24">
                <el-card class="box-card">
                    <checkboxs></checkboxs>
                </el-card>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :xs="24" :sm="24" :md="24" :lg="24">
                <el-card class="box-card">
                    <Inputbox></Inputbox>
                </el-card>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :xs="24" :sm="24" :md="24" :lg="24">
                <el-card class="box-card">
                    <inputNumber></inputNumber>
                </el-card>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :xs="24" :sm="24" :md="24" :lg="24">
                <el-card class="box-card">
                    <selects></selects>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import radio from '../form/forminput/radio.vue'
import checkboxs from '../form/forminput/checkbox.vue'
import Inputbox from '../form/forminput/Inputbox.vue'
import inputNumber from '../form/forminput/inputNumber.vue'
import selects from '../form/forminput/select.vue'
export default {
  components: {
    radio,
    checkboxs,
    Inputbox,
    inputNumber,
    selects
  },
  methods: {}
}
</script>

<style scoped>
.el-col {
  margin-bottom: 16px;
}
.material-icons {
  font-size: 80px;
  color: #ddd;
}

.cart-string {
  height: 100px;
  padding-top: 10px;
  font-size: 1.1rem;
}
</style>
